<template>
    <div class="checkinRecord-container">
        <div class="dateFilter">
            <van-cell
                center
                class="date-time"
                :title="$st('wp_Select_Date_Range')"
                clickable
                @click="show = true">
                <template #icon>
                    <van-icon
                        style="margin-right:12px;"
                        :name="require('@/assets/icon_26_calendar@2x.png')"
                        size="26" />
                </template>
                <template #extra>
                    <div
                        class="date-btn-right"
                        style="text-align:right">
                        <span> {{dateRange}} </span>  <van-icon name="arrow" />
                    </div>

                </template>
            </van-cell>
            <van-calendar
                v-model:show="show"
                type="range"
                color="#1989fa"
                :max-date="maxDate"
                :min-date="minDate"
                @confirm="onConfirm" />
        </div>
        <van-pull-refresh
            v-model="refreshing"
            @refresh="onRefresh">
            <van-list
                v-model:loading="loading"
                :finished="finished"
                :finished-text="$st('wp_No_more')"
                @load="onLoad"
            >
                <van-cell
                    center
                    class="cell"
                    v-for="(child,index) in records"
                    :key="index"
                    :title="child.customer_name || $st('wp_Unknown')"
                    :label="child.address">
                    <template #extra>
                        <div class="record">
                            <div :class="['status','status_'+child.status]">{{ child.statusStr }}</div>
                            <div class="time">{{ child.createtime }}</div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import { ref, computed, onActivated } from 'vue';
import useMemberMarkRecordsSetup from '@/setup/maintenanceteam/MemberMarkRecordsSetup.js';
import Cookies from 'js-cookie';
import moment from 'moment';
import { selfI18n } from '@/i18n';
export default {
    setup () {
        const { queryMarkRecords } = useMemberMarkRecordsSetup();
        const maxDate = new Date();
        const minDate = new Date();
        minDate.setMonth(minDate.getMonth() - 6);
        let today = new Date();
        today.setDate(today.getDate() - 1);
        const startDate = ref(today);

        today = new Date();
        const endDate = ref(today);

        const show = ref(false);
        const records = ref([]);
        let page = 0;
        const countSize = 5;
        let allnum = -1;
        const loading = ref(false);
        const finished = ref(false);
        const refreshing = ref(false);

        const dateRange = computed(() =>
            moment(startDate.value).format('YYYY-MM-DD') + ' ' + selfI18n('to') + ' ' + moment(endDate.value).format('YYYY-MM-DD')
        );
        const onConfirm = (values) => {
            const [start, end] = values;
            show.value = false;
            startDate.value = start;
            endDate.value = end;
            refreshing.value = true;
            onRefresh();
        };

        const onLoad = () => {
            if (refreshing.value) {
                records.value = [];
                refreshing.value = false;
            }
            page++;
            queryMarkRecords(Cookies.get('username'), countSize, page, { status: 'all', starttime: moment(startDate.value).format('YYYY-MM-DD 00:00:00'), endtime: moment(endDate.value).add(1, 'days').format('YYYY-MM-DD 00:00:00') }).then(response => {
                records.value.push(...response.value);
                allnum = response.allnum;
                loading.value = false;
                if (countSize * page >= allnum) {
                    finished.value = true;
                }
            });
        };
        const onRefresh = () => {
            finished.value = false;
            loading.value = true;
            page = 0;
            onLoad();
        };
        onActivated(() => {
            records.value = [];
            onRefresh();
        });
        return {
            minDate,
            maxDate,
            startDate,
            endDate,
            dateRange,
            show,
            onConfirm,
            onLoad,
            records,
            loading,
            finished,
            onRefresh,
            refreshing
        };
    }
};
</script>
<style lang="scss" scoped>
.checkinRecord-container{
    .van-cell:first-child{
        margin-top: 10px;
    }
    image{
        margin-right: 12px;
    }
    :deep(.van-cell__title){
        color: #000000;
        font-size: 15px;
    }
    :deep(.van-cell__label){
        font-size: 15px;
        color: rgba(0,0,0,0.40);
    }
    .dateFilter{
        :deep(.van-cell__title){
            font-size: 17px;
        }
    }
    .circle{
        width: 10px;
        height: 10px;
        background-color:blue;
        border-radius: 50%;
    }
    .record{
        text-align: right;
        .time{
            font-size: 13px;
            color: rgba(0,0,0,0.40);
        }
        .status{
            font-size: 15px;
            color: black;
            &::before{
                content: '';
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: black;
                margin-right: 8px;
            }
        }
        .status_0{
            &::before{
                background: #7948EA;//未知-紫色
            }
        }
        .status_1{
            &::before{
                background: #52C41A;//工作中-绿色
            }
        }
        .status_2{
            &::before{
                background: #FFC300;//待命中-黄色
            }
        }
        .status_3{
            &::before{
                background: #BFBFBF;//休息中-灰色
            }
        }

    }
}
.cell {
    padding: 15px;
}

// .date-btn-right{
//  display: box;
//   box-orient: horizontal;
//   box-pack: center;
//   box-align:right;
// }
</style>
